<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>车间遗留看板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class='searchDiv'>
      <el-form class='elForm'>
        <el-form-item>
          <label>部门</label>
          <el-select style="width:140px;" placeholder="请选择部门" v-model='search.deptId' @change='getWorkshop'>
            <el-option value="" label="请选择"></el-option>
            <el-option v-for="dept in deptList" :key="dept.id" :label="dept.deptName" :value="dept.id"></el-option>
          </el-select>
          <label>车间</label>
          <el-select style="width:140px;" placeholder="请选择车间" v-model='search.workShopId' @change='setMaterialList'>
            <el-option value="" label="请选择"></el-option>
            <el-option v-for="workShop in workShopList" :key="workShop.id" :label="workShop.workshopName" :value="workShop.id"></el-option>
          </el-select>
          <label>物料类型</label>
          <el-select style="width:140px;" placeholder="请选择物料" v-model='search.machining'>
            <el-option value="" label="请选择"></el-option>
            <el-option v-for="materialType in materialTypeList" :key="materialType" :label="materialType" :value="materialType"></el-option>
          </el-select>
          <el-button type="primary" @click="getWorkShopMaterialCount(true)">查询</el-button>
        </el-form-item>
      </el-form>

    </div>

    <div style="margin-top:10px;padding:0 10px;">
      <el-table fit stripe border :data="leftOverList" style="width:100%;">
        <el-table-column :resizable="false" prop="orderId" label="系统编号" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="customerId" label="客户型号" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="customerOrderId" label="客户订单号" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" prop="machining" label="加工对象" :auto-width="true" min-width="100px"></el-table-column>
        <el-table-column :resizable="false" label="人工排期" :auto-width="true" min-width="100px;">
          <template slot-scope="scope">
            <span v-if=" scope.row.setTime !== null && scope.row.setTime !== '' ">{{scope.row.setTime.substring(5)}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" label="入库日期" :auto-width="true" min-width="100px;">
          <template slot-scope="scope">
            <span v-if=" scope.row.inTime !== '' && scope.row.setTime !== '' ">{{scope.row.inTime.substring(5)}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" prop="inCount" label="入库数" min-width="40px;"></el-table-column>
        <el-table-column :resizable="false" prop="outCount" label="出库数" min-width="40px;"></el-table-column>
        <el-table-column :resizable="false" prop="turnover" label="遗留数" min-width="40px;"></el-table-column>
      </el-table>
    </div>
    <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
      <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
        @current-change="pageChange">
      </el-pagination>
    </div>
  </div>
  <script src="../myJs/importFile.js"></script>
  <script>
    importFile();

  </script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: function () {
        return {
          search: {
            deptId: '',
            workShopId: '',
            machining: ''
          },
          oldSearch: {
            deptId: '',
            workShopId: '',
            machining: ''
          },
          deptList: [{
            id: '',
            deptName: ''
          }],
          workShopList: [{
            id: '',
            workshopName: ''
          }],
          materialTypeList: [""],
          leftOverList: [],
          loading: false,
          updateDialog: false,
          moment: moment,
          pagination: {
            currentPage: 1,
            totalCount: 0,
            pageSize: 10
          }
        };
      },
      created: function () {
        this.getProductionDepartment();
      },
      methods: {
        //获取生产车间
        getProductionDepartment: function () {
          var self = this;
          ajaxRequest("basicData/getProductionDepartment").then(function (res) {
            self.deptList = res;
          }).catch(function (error) {
            console.log(error);
          });
        },
        //获取部门车间
        getWorkshop: function () {
          var self = this;
          var deptId = this.search.deptId;
          ajaxRequest("basicData/getWorkshop", {
            deptId: deptId
          }).then(function (res) {
            self.workShopList = res;
          }).catch(function (error) {
            console.log(error);
          });
        },
        //设置物料集合
        setMaterialList: function () {
          var self = this;
          var workShopId = this.search.workShopId;
          ajaxRequest("workshop/getMachining", {
            workShop: workShopId
          }).then(function (res) {
            self.materialTypeList = res;
          }).catch(function (error) {
            console.log(error);
          });
        },
        getWorkShopMaterialCount: function (bool) {
          var self = this;
          var search = this.search;
          if (bool) {
            this.oldSearch = _.cloneDeep(search);
            this.pagination.currentPage = 1;
          }
          search = _.cloneDeep(this.oldSearch);
          search.start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
          search.length = this.pagination.pageSize;
          if (search.workShopId == '') {
            this.$message({
              message: '请选择车间',
              type: 'warning'
            });
            return;
          }
          search.workShop = search.workShopId
          ajaxRequest("workshop/getWorkLeftOver", search, false).then(function (res) {
            if (!bool) {
              self.search = _.cloneDeep(self.oldSearch);
            }
            self.pagination.totalCount = res.iTotalRecords;
            self.leftOverList = res.returnData;
          }).catch(function (error) {
            console.log(error);
          });
        },
        pageChange: function () {
          this.getWorkShopMaterialCount(false);
        }
      }
    });

  </script>
</body>

<style>
  .searchDiv {
    margin-top: 10px;
    margin-left: 10px;
  }

  .form-input {
    width: 200px;
  }

</style>

</html>
